<template>
	<view>
      <view style="width: 100%">
		  
		<view>
			<input type="text" />
		</view>  
		<view>
			<span  style="text-align: center;width: 140px;">
			    <image src="/static/img/xl.svg" style="height:34rpx;width:24rpx;align-items: center;"></image>
			</span>
		</view>
		  
        <view class="record-box">
         <view class="record-btn-layer" >

            <button style="height: 70rpx;font-size: 18px;padding: 5px;width: 98%;"  @longpress="longpressBtn" @touchend="touchendBtn">
              <image src="/static/img/yygbq.svg"/>
              <text>{{longPress == '1' ? '按住说话' : '说话中...'}}</text>
            </button>
          </view>
          <!-- 语音音阶动画 -->
         <view class="prompt-layer prompt-layer-1" v-if="longPress === '2'">
            <view class="prompt-loader">
              <view class="em" v-for="(item,index) in 15" :key="index"></view>
            </view>
            <text class="span">松手结束录音</text>
          </view>
        </view>
      </view>
	</view>
</template>

<script>
	const app = getApp();
	let init // 录制时长计时器
	let timer; // 播放 录制倒计时
	const recorder = wx.getRecorderManager();
	import {getToken, soundReco} from "@/api/baidu_ai"
	import base64 from '../../common/js/lib/base64.js';
	
	export default {
		data() {
			return {
				user: null,
				sl: [{
				  name: '普通话',
				  value: 'zh_CN'
				}],
				tapIndex: 0,
				loadding:false,
				isScanning:false,//是否语音说话中
				soundStr:"",//语音识别内容
				searchInputStr:'',//修改语音失败的内容
				soundSearchList:[],//语音转文字后搜素的结果集合
				count: null, // 录制倒计时
				longPress: '1', // 1显示 按住说话 2显示 说话中
				delShow: false, // 删除提示框显示隐藏
				time: 0, //录音时长
				duration: 60000, //录音最大值ms 60000/1分钟
				tempFilePath: '', //音频路径
				playStatus: 0, //录音播放状态 0:未播放 1:正在播放
			}
		},
		methods: {
			soundRecognize() { //语音识别
				  var user = app.globalData.get_user_info(this, "init");
				  if(user != null){
				 	this.user =user;
				  }
				  // console.log("---------",this.audio_path)
				  // console.log("---111----",this.audio_data)
				  
				  uni.request({
					  url: app.globalData.get_request_url("soundReco_tencent"),
					  method: 'POST',
					  data: {base64data:this.audio_data},
					header:{
						'Tenant-Id':this.user.role.tenantId,
						'X-Access-Token':this.user.token,
					},
					  dataType: 'json',
					  success: res => {
						  uni.hideLoading();
						console.log("res",res);
						  if (res.data.code == 200) {
								if (res.data.msg == '成功'){
									
								}
						  }
					  },
					  fail: () => {
						  uni.hideLoading();
						  app.globalData.showToast('服务器请求出错');
					  }
				  });
			  
			},
			start() { //语音触摸
			  this.yyin = false;
			  const options = {
			    sampleRate: 16000,
			    numberOfChannels: 1,
			    format: "PCM",
			    lang: this.lang
			  };
			  recorder.start(options);
			  recorder.onStart(() => {
			    // console.log("Recording!~~~");
			  });
			  recorder.onError(err => {
			    console.log(err);
			  });
			},
			stop() { //语音结束触摸
			  this.yyin = true;
			  recorder.stop();
			  recorder.onStop(res => {
			    // 
			    this.audio_path = res.tempFilePath;

			    const fs = wx.getFileSystemManager();
			    fs.readFile({
			      filePath: this.audio_path,
				  encoding: 'base64',
			      success: (res) => {
					this.audio_data = res.data;
			        //this.audio_data = this.arrayBufferToBase64(res.data);
			        this.soundRecognize();
			      }
			    });
			  });
			},
			arrayBufferToBase64(buffer) {
			    var binary = '';
			    var bytes = new Uint8Array(buffer);
			    var len = bytes.byteLength;
			    for (var i = 0; i < len; i++) {
			        binary += String.fromCharCode(bytes[i]);
			    }
			    // 对二进制字符串进行base64编码
			    return base64.encode(binary);
			},
			xz() { //语种选择
			  let that = this;
			  uni.showActionSheet({
			    itemList: ['普通话', '粤语', '英语'],
			    success: function(res) {
			      that.tapIndex = res.tapIndex;
			      that.lang = that.sl[res.tapIndex].value;
			    },
			    fail: function(res) {
			      console.log(res.errMsg);
			    }
			  });
			},
			// 倒计时
			countdown(val){
			  let _then = this;
			  _then.count = Number(val);
			  timer = setInterval(function() {
			    if(_then.count > 0){
			      _then.count--
			    } else {
			      _then.longPress = '1';
			      clearInterval(timer);
			    }
			  }, 1000);
			},
			// 长按松开录音事件
			touchendBtn(){
			  this.longPress = '1';
			  this.stop();
			},
			longpressBtn(){
			  this.longPress = '2';
			  this.countdown(60); // 倒计时
			  this.isScanning =true;
			  this.start();
			},
		}
	}
</script>
<style>

/* 语音录制开始--------------------------------------------------------------------- */
.record-layer{
  width: 100%;
  padding: 300px 0;
  box-sizing: border-box;
}
.record-box{
  width: 100%;
  position: relative;
  padding-top: 4px;
}
.record-btn-layer{
  width: 100%;display: flex;justify-content:space-between;align-items: center;
}
.record-btn-layer button::after {
  border: none;
}
.record-btn-layer button{
  font-size: 14px;
  line-height: 28px;
  width: 100%;
  height: 22px;
  border-radius: 8px;
  text-align: center;
  background: #FFD300;
}
.record-btn-layer button image{
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: middle;
}
.record-btn-layer .record-btn-2{
  background: rgba(255, 211, 0, 0.2);
}
/* 提示小弹窗 */
.prompt-layer{
  border-radius: 8px;
  background: #FFD300;
  padding: 8px 16px;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.prompt-layer::after{
  content: '';
  display: block;
  border: 6px solid rgba(0,0,0,0);
  border-top-color: rgba(255, 211, 0, 1);
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.prompt-layer-1{
  font-size: 12px;
  width: 128px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: -80px;
}
.prompt-layer-1 .p{
  color: #000000;
}
.prompt-layer-1 .span{
  color: rgba(0,0,0,.6);
}
.prompt-loader .em{

}
/* 语音音阶------------- */
.prompt-loader {
  width: 96px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.prompt-loader .em {
  display: block;
  background: #333333;
  width: 1px;
  height: 10%;
  margin-right: 2.5px;
  float: left;
}
.prompt-loader .em:last-child {
  margin-right: 0px;
}
.prompt-loader .em:nth-child(1) {
  animation: load 2.5s 1.4s infinite linear;
}
.prompt-loader .em:nth-child(2) {
  animation: load 2.5s 1.2s infinite linear;
}
.prompt-loader .em:nth-child(3) {
  animation: load 2.5s 1s infinite linear;
}
.prompt-loader .em:nth-child(4) {
  animation: load 2.5s 0.8s infinite linear;
}
.prompt-loader .em:nth-child(5) {
  animation: load 2.5s 0.6s infinite linear;
}
.prompt-loader .em:nth-child(6) {
  animation: load 2.5s 0.4s infinite linear;
}
.prompt-loader .em:nth-child(7) {
  animation: load 2.5s 0.2s infinite linear;
}
.prompt-loader .em:nth-child(8) {
  animation: load 2.5s 0s infinite linear;
}
.prompt-loader .em:nth-child(9) {
  animation: load 2.5s 0.2s infinite linear;
}
.prompt-loader .em:nth-child(10) {
  animation: load 2.5s 0.4s infinite linear;
}
.prompt-loader .em:nth-child(11) {
  animation: load 2.5s 0.6s infinite linear;
}
.prompt-loader .em:nth-child(12) {
  animation: load 2.5s 0.8s infinite linear;
}
.prompt-loader .em:nth-child(13) {
  animation: load 2.5s 1s infinite linear;
}
.prompt-loader .em:nth-child(14) {
  animation: load 2.5s 1.2s infinite linear;
}
.prompt-loader .em:nth-child(15) {
  animation: load 2.5s 1.4s infinite linear;
}
@keyframes load {
  0% {
    height: 10%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 10%;
  }
}
/* 语音音阶-------------------- */
.prompt-layer-2{
  top: -40px;
}
.prompt-layer-2 .text{
  color: rgba(0, 0, 0, 1);
  font-size: 12px;
}
/* 语音录制结束---------------------------------------------------------------- */
</style>
